<template>
  <n-flex
    class="box"
    align="center"
  >
    <n-icon
      size="40"
      :color="selectTypeOption.color"
      class="mr-12"
      :component="selectTypeOption.icon"
    />
    <n-flex
      vertical
      justify="space-around"
      class="h100"
      :size="[4, 4]"
    >
      <span class="minor-text">{{ selectTypeOption.label }}</span>
      <h5>{{ price }}</h5>
      <n-flex class="minor-text">
        <span>昨: {{ yesterday }}元</span>
        <span>今: {{ today }}元</span>
      </n-flex>
    </n-flex>
  </n-flex>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import { TrendingDown, TrendingUp } from '@vicons/ionicons5'
  const props = defineProps<{
    type: 1 | 2 // 1: 支出 2: 收入
    price: number
    yesterday: number
    today: number
  }>()

  const selectTypeOption = computed(() => {
    const typeOptions = [
      { value: 1, label: '支出', icon: TrendingDown, color: '#cf7373' },
      { value: 2, label: '收入', icon: TrendingUp, color: '#3d8b64' }
    ]
    return typeOptions.find(item => item.value === props.type)
  })
</script>

<style scoped lang="scss">
  h5 {
    margin: 0;
    font-size: 20px;
  }
  .minor-text {
    color: $minor-color;
  }
</style>
